<template>
  <div>
    <div style="display: flex; width: 100%; height: 40px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in unit"
          :key="item._id"
          :label="item.name"
          :name="item._id"
        ></el-tab-pane>
      </el-tabs>
      <el-link type="primary" style="margin-left: 20px" @click="addUnitState()"
        >添加楼层单元</el-link
      >
    </div>
    <el-button type="primary" plain @click="addRoomState()">
      添加楼层房间</el-button
    >
    <el-table :data="rooms" style="width: 100%">
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="floorNum" label="楼层" width="180">
      </el-table-column>
      <el-table-column prop="roomNum" label="房间号"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="thing">
          <el-link type="danger" @click="delOne(thing.row._id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加单元" :visible.sync="addState">
      <el-form :model="form">
        <el-form-item label="单元" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addState = false">取 消</el-button>
        <el-button type="primary" @click="addUnit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加房间" :visible.sync="roomState">
      <el-form :model="room">
        <el-form-item label="房间名" :label-width="formLabelWidth">
          <el-input v-model="room.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="room.floorNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-input v-model="room.roomNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="room.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roomState = false">取 消</el-button>
        <el-button type="primary" @click="addRoom()">确 定</el-button>
      </div>
    </el-dialog>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "",
      unit: [],
      form: {
        name: "",
        floor_id: "",
      },
      addState: false,
      formLabelWidth: "120px",
      room: {},
      roomState: false,
      rooms: [],
      currentPage: 1,
      pageSize:1,
      total:''
    };
  },
  methods: {
    async handleClick() {
      let {
        data: { code, rooms , total},
      } = await this.axios.get(`/getRoom?unit_id=${this.activeName}&currentPage=${this.currentPage}&pageSize=${this.pageSize}`);
      this.rooms = rooms;
      this.total = total
    },
    async getUnit() {
      console.log(this.$store.state.floor_id);
      let {
        data: { code, unit },
      } = await this.axios.get("/getUnit?unitId=" + this.$store.state.floor_id);
      console.log(unit);
      if (code == 200) {
        this.unit = unit;
      }
    },
    addUnitState() {
      this.addState = true;
    },
    async addUnit() {
      this.form.floor_id = this.$store.state.floor_id;
      console.log(this.form);
      let {
        data: { code },
      } = await this.axios.post("/addUnit", this.form);
      if (code == 200) {
        this.$message.success("添加成功");
        this.addState = false;
        this.form = {};
        this.getUnit();
      }
    },
    addRoomState() {
      this.roomState = true;
    },
    async addRoom() {
      this.room.unit_id = this.activeName;
      let {
        data: { code },
      } = await this.axios.post("/addRoom", this.room);
      if (code == 200) {
        this.$message.success("添加房间成功");
        this.roomState = false;
        this.handleClick();
      }
    },
    async delOne(id) {
      let {
        data: { code },
      } = await this.axios.get("/delOne?room_id=" + id);
      if (code == 200) {
        this.$message.success("删除成功");
        this.handleClick();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.handleClick()

    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.handleClick()

    },
  },
  created() {
    this.getUnit();
    // this.getRoom()
    this.handleClick()
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>